import React from 'react';
import {connect} from 'react-redux';
import {messages} from "share/common";
import menuRoute from 'routes/menuRoute';
import 'styles/setting/cost-center-group-class/cost-center-group-class-detail.scss';
import CCGClassService from 'containers/setting/cost-center-group-class/cost-center-group-class.service';
import {Button, Table, Popover,Badge} from 'antd';
import BasicInfo from 'components/basic-info';
import ResizeTable from "components/resize-table";

class CostCenterGroupClassDetailList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      updateState: false,
      infoData: this.props.location.state,
      infoList: [
        {
          type: 'input',
          label: messages('setting.key1668')/*成本中心组类别代码*/,
          id: 'code',
          disabled: true
        },
        {
          type: 'input',
          label: messages('setting.key1665')/*成本中心组类别名称*/,
          id: 'name',
        },
        {
          type: 'input',
          label: messages('setting.key291')/*账套名称*/,
          id: 'setOfBooksName',
          disabled: true
        },
        {
          type: 'input',
          label: messages('setting.key903')/*成本中心*/,
          id: 'costCenterName',
          disabled: true
        },
        {
          type: 'input',
          label: messages('setting.key1031')/*描述*/,
          id: 'description',
        },
        {
          //状态
          type: 'switch',
          label: messages('setting.key289'/*状态*/),
          id: 'enabled'
        },
      ],
      loading: false,
      data: [],
      pagination: {
        total: 0,
        page: 0,
        pageSize: 10,
        showSizeChanger: true,
        showQuickJumper: true,
      },
      columns: [
        {
          title: messages('setting.key369')/*成本中心组代码*/,
          dataIndex: 'costCenterGroupCode',
          render: text => <span>{text ? <Popover placement="topLeft" content={text}>{text}</Popover> : '-'}</span>
        },
        {
          title: messages('setting.key370')/*成本中心组名称*/,
          dataIndex: 'costCenterGroupName',
          render: text => <span>{text ? <Popover placement="topLeft" content={text}>{text}</Popover> : '-'}</span>

        },
        {
          title: messages('setting.key1031')/*描述*/,
          dataIndex: 'description',
          render: text => <span>{text ? <Popover placement="topLeft" content={text}>{text}</Popover> : '-'}</span>
        },
        {
          title: messages('common.column.status')/*状态*/,
          dataIndex: 'enabled',
          render: (text) => {
            return <span>
            <Badge status={text ? "success" : 'error'}/>
              {text ? messages('common.enabled')/*启用*/ : messages('common.status.disable')/*禁用*/}</span>
          }
        },
      ],
      costCenterGroupDefine: menuRoute.getRouteItem('cost-center-group-define', 'key').url,
      costCenterGroupClassDefine: menuRoute.getRouteItem('cost-center-group-class', 'key').url
    }
  };

  componentWillMount() {
    this.getCostCenterGroupClassDetail();
    this.getCostCenterGroupListByClassId();
  };

  //获取成本中心的详情信息
  getCostCenterGroupClassDetail = () => {
    const {infoData} = this.state;
    this.setState({
      loading: true,
    });
    let params = {
      id: infoData.id
    }
    CCGClassService.getCostCenterGroupClassDetail(params)
      .then(res => {
        this.setState({
          infoData: res.data,
          loading: false,
        });
      })
      .catch(res => {
        this.setState({
          loading: false,
        });
      });
  };

  //获取成本中心类别下面的成本中心组
  getCostCenterGroupListByClassId = () => {
    const {infoData} = this.state;
    let pagination = this.state.pagination;
    let params = {
      page: pagination.page,
      size: pagination.pageSize,
      costCenterGroupCategoryId: infoData.id
    }
    this.setState({
      loading: true,
    });
    CCGClassService.getCostCenterGroupListByClassId(params)
      .then(res => {
        pagination.total= Number(res.headers['x-total-count']) || 0;
        pagination.current = pagination.page + 1;
        this.setState({
          pagination,
          data: res.data,
          loading: false,
        });
      })
      .catch(res => {
        this.setState({
          loading: false,
        });
      });
  };
  //分页点击
  onChangePager = (_pagination, filters, sorter) => {
    let pagination = this.state.pagination;
    pagination.page = _pagination.current - 1;
    pagination.pageSize = _pagination.pageSize;
    this.setState({
      pagination,
    }, () => {
      this.getCostCenterGroupListByClassId();
    })
  };

  updateHandle = (value) => {
    const {infoData} = this.state;
    infoData.description = value.description;
    infoData.name = value.name;
    CCGClassService.updateCostCenterGroupClass(infoData)
      .then((response) => {
        this.setState({
          infoData: response.data,
          updateState: true
        })
      })
  };
  //返回
  back = () => {
    this.context.router.push(this.state.costCenterGroupClassDefine)
  }
  showAddCostCenterGroup = () => {
    this.context.router.push(this.state.costCenterGroupDefine)
  }

  render() {
    const {
      data, columns, loading, pagination,infoList,infoData,updateState
    } = this.state;

    return (
      <div className={'cost-center-group-class-detail'}>
        <BasicInfo infoList={infoList}
                   infoData={infoData}
                   updateState={updateState}
                   updateHandle={this.updateHandle}
                   loading={loading}/>
        <div>
          <br/>
          <Button type={'primary'}
                  onClick={this.showAddCostCenterGroup}> {messages('common.add')/*添加*/}
          </Button>
        </div>
        <div style={{marginTop: 10, marginBottom: 10}}>
          {messages('common.total', {total: `${pagination.total}`})}
          {/*共搜索到{pagination.total}条数据*/}
        </div>
        <div className={"cost-center-group-class-detail-table"}>
          <ResizeTable
            bordered
            size={'middle'}
            rowKey={'id'}
            dataSource={data}
            columns={columns}
            loading={loading}
            onChange={this.onChangePager}
            pagination={pagination}
          />
        </div>
        <div style={{marginTop: 20, marginBottom: 20}}>
          <a onClick={this.back}
             style={{fontSize: 13}}>
            {messages('common.back')/*返回*/}
            </a>
        </div>
      </div>
    )
  }

}

CostCenterGroupClassDetailList.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {}
}

export default connect(mapStateToProps)(CostCenterGroupClassDetailList);
